import React, { useContext, useState } from 'react';
import { StatusBar, Alert, View, ScrollView,ImageBackground } from 'react-native';
import { Button, CheckBox, Icon, Image, Input, Text } from 'react-native-elements';
import CryptoJS from 'crypto-js';

import LocaleContext from '../libs/locale';
import { keyPairFromSeed, randomSeed, toAddress } from '../libs/keyPair';
import logo from '../assets/Guest/logo.png';
import AsyncStorage from '@react-native-async-storage/async-storage';

const Register = ({ navigation, setWallet }: any) => {
  const locale = useContext(LocaleContext);
  const [read, setRead] = useState(false);
  const [pwdVisible, setPwdVisible] = useState(false);
  const [pwdVisible2, setPwdVisible2] = useState(false);
  const [memo, setMemo] = useState('');
  const [pwd, setPwd] = useState('');
  const [pwd2, setPwd2] = useState('');

  const onRegister = async () => {
    // if (!memo) {
    //   Alert.alert('', `${locale?._('enter')} ${locale?._('Register.memo')}`);
    //   return;
    // }
    // if (pwd.length < 6 || pwd.length > 12) {
    //   Alert.alert('', locale?._('Register.passwordError'));
    //   return;
    // }
    if(pwd=="" || pwd2=="")
    {
      Alert.alert('', locale?._('Register.passwordError'));
      return;
    }
    if (pwd !== pwd2) {
      Alert.alert('', locale?._('Register.repasswordError'));
      return;
    }

    const seed = randomSeed();
    const keyPair: any = keyPairFromSeed(seed);
    const address = toAddress(keyPair.publicKey);
    await AsyncStorage.setItem('@wallet_address', address)
    const encrypted = CryptoJS.AES.encrypt(seed, pwd).toString();


    setWallet({ encrypted, seed, address, memo, exported: false });
    navigation.reset({ index: 0, routes: [{ name: 'Normal' }] });
  };

  return (
    <ScrollView>
      <StatusBar barStyle='dark-content' translucent={false} backgroundColor="#FFFFFFFF" />
      <View style={{
        height: 120,
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        marginTop: 100,
        marginLeft: 28,
      }}>
        <ImageBackground source={logo} style={{ width: 570 * 0.32, height: 99 * 0.32 }} />
        <Text style={{
          fontSize: 18,
          color: '#8C8C8CFF',
          marginTop: 18,
          marginBottom: 50,
        }}>{locale?._('Guest.slogan')}</Text>
      </View>
      <View style={{
        flexDirection: 'column',
        alignItems: 'stretch',
        paddingLeft: 16,
        paddingRight: 16,
        marginBottom: 20,
      }}>
        {/* <Input
          placeholder={locale?._('Register.memo')}
          onChangeText={value => setMemo(value.trim())}
        /> */}
        <Input
          placeholder={locale?._('Register.passwordPlaceholder')}
          rightIcon={<Icon
            name={pwdVisible ? 'eye' : 'eye-off'}
            type='feather'
            onPress={() => setPwdVisible(!pwdVisible)}
          />}
          secureTextEntry={!pwdVisible}
          onChangeText={value => setPwd(value)}
        />
        <Input
          placeholder={locale?._('Register.repassword')}
          rightIcon={<Icon
            name={pwdVisible2 ? 'eye' : 'eye-off'}
            type='feather'
            onPress={() => setPwdVisible2(!pwdVisible2)}
          />}
          secureTextEntry={!pwdVisible2}
          onChangeText={value => setPwd2(value)}
        />
      </View>
      <View style={{
        display: 'flex',
        alignItems: 'center',
      }}>
        <Button
          title={locale?._('Guest.register')}
          disabled={!read}
          onPress={onRegister}
          buttonStyle={{ backgroundColor: '#7460E3FF' }}
        />
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            paddingRight: 24
          }}
        >
          <CheckBox
            center
            checkedIcon='dot-circle-o'
            uncheckedIcon='circle-o'
            size={18}
            checked={read}
            onPress={() => setRead(!read)}
            containerStyle={{ margin: 0, paddingRight: 0 }}
            checkedColor='#7460E3FF'
          />
          <Text>{locale?._('Register.read')}</Text>
          <Text
            onPress={() => navigation.navigate('Privacy')}
            style={{ paddingLeft: 4, color: '#7259E0FF', textDecorationLine: 'underline' }}
          >{locale?._('Register.privacy')}</Text>
        </View>

      </View>
    </ScrollView>
  );
};

export default Register;
